<template>
  <div class="news_detail">
    <ComNavBar :title="t('News detail')" />
    <div class="container">
      <div class="title">{{ details.msg_title }}</div>
      <div class="time">{{ date(details.create_datetime, 'hh:mm:ss DD/MM/YYYY') }}</div>
      <div class="content" v-html="details.msg_content"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { get } from '@/utils/request'
import { date } from '@/utils/util'
import { showLoadingToast, closeToast } from 'vant'
import 'vant/es/toast/style'
import { t } from '@/languages'
const routes = useRoute()
const details = ref({})
async function getDetail() {
  try {
    showLoadingToast({
      duration: 0
    });
    const res = await get(`/api/app/message/${routes.query.id}/`)
    const msg_content_list = res.msg_content.split('\n')
    details.value = {
      ...res,
      msg_content: msg_content_list.map(e => `<p>${e}</p>`).join('')
    }
    console.log(msg_content_list)
  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
  }
  
}
getDetail()

</script>
<style >

</style>
<style lang="scss" scoped>

.news_detail {
  width: 100%;
  min-height: 100%;
  .title {
    color: #fff;
    padding: 0.53333rem;
    padding-bottom: 0.26667rem;
    font-size: 0.64rem;
    word-break: break-word;
   // text-align: justify
  }
  .time {
    color: #545655;
    padding: 0.53333rem;
    text-align: center;
  }
  .content {
    color: #ccc;
    padding: .4rem;
    line-height: 1.5em;
   
    :deep(p) {
      word-break: break-word;
      text-align: justify;
      letter-spacing: 1px;
      margin-bottom: 0.5rem;
    }
}
}
</style>
